<template>
  <div class="table">
    <a-row>
      <a-col :span="24" class="cell field">
        <a-space :size="16">
          <e-tag v-if="record.phaseID !== 0" :item="'Phase ' + record.phaseID" />
          <a-tag v-else color="#FFCBCB" style="color: #e14d4d; border: 1px solid #e14d4d">Close</a-tag>
          <span>
            <e-icon type="date" font-size="16px" line-height="17px" />
            {{ dayjs(record.createOn).format('YYYY-MM-DD HH:mm') }}
          </span>
          <span>
            <e-icon type="SalesPersonnel" font-size="16px" line-height="17px" />
            {{ record.createByName }}
          </span>
          <span v-if="editable" v-permission="'PhaseProgress:Add'">
            <a-button
              type="link"
              size="small"
              @click="
                () =>
                  router.push({
                    name: 'Add Communication Record',
                    params: { action: 'edit', id: clientId, leadId: leadId, recordId: record.id }
                  })
              ">
              <a-space>
                <e-icon type="edit" />
                Edit
              </a-space>
            </a-button>
          </span>
        </a-space>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4" class="cell field">Contacts</a-col>
      <a-col :span="20" class="cell value">
        <div v-if="Array.isArray(record.contacts) && record.contacts.length > 0">
          <a-tag v-for="(contact, index) in record.contacts" :key="index" class="contact-tag">{{ contact }}</a-tag>
        </div>
        <div v-else>--</div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4" class="cell field">Communication Method</a-col>
      <a-col :span="8" class="cell value">{{ transformedCommunicationMethods }}</a-col>
      <a-col :span="4" class="cell field">Communication Time</a-col>
      <a-col :span="8" class="cell value">
        {{ record.communicationTime ? dayjs(record.communicationTime).format('YYYY-MM-DD') : record.communicationTime }}
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4" class="cell field">Communication Category</a-col>
      <a-col :span="8" class="cell value">{{ record.communicationCategory }}</a-col>
      <a-col :span="4" class="cell field">Attachment</a-col>
      <a-col :span="8" class="cell value">
        <a-tag v-if="record.attachment !== 0" class="attachment-tag" @click="handleDownload">
          <a-space><e-icon type="Document" />{{ record.attachmentName }}</a-space>
        </a-tag>
        <span v-else>--</span>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4" class="cell field">Communication Subject</a-col>
      <a-col :span="20" class="cell value" style="white-space: pre-line">{{ record.communicationSubject }}</a-col>
    </a-row>
    <a-row>
      <a-col :span="4" class="cell field">Next Communication</a-col>
      <a-col :span="20" class="cell value">{{ record.nextCommunication }}</a-col>
    </a-row>
  </div>
  <a-divider dashed />
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import ETag from '@/components/ETag.vue'
import EIcon from '@/components/EIcon.vue'
import { useDict } from '@/hooks/useDict.js'
import Config from '@/config'
import dayjs from 'dayjs'
const router = useRouter()
const props = defineProps({
  record: {
    type: Object,
    default() {
      return {}
    }
  },
  editable: {
    type: Boolean,
    default: false
  },
  clientId: {
    type: String,
    default: ''
  },
  leadId: {
    type: Number,
    default: 0
  },
  downloadHandler: {
    type: Object,
    default() {
      return {}
    }
  }
})
const dict = useDict()
const transformedCommunicationMethods = computed(() => {
  const result = dict.value.communicationMethods.find(method => method.value === props.record.communicationMethod)
  return result ? result.text : props.record.communicationMethods
})
const handleDownload = () => {
  props.downloadHandler.showDownload([
    {
      ServerFileID: 2,
      Url: Config.SIGNAL_R_URL,
      RealPath: props.record.attachmentAddr.replace('/\\/g', '\\\\'),
      FullName: `\\${props.record.attachmentName}`
    }
  ])
}
</script>

<style lang="less" scoped>
@border: 1px solid @lighter-gray;
.table {
  border: @border;
  .cell {
    padding: 10px 14px;
    border-bottom: @border;
    border-right: @border;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
  .ant-tag {
    background-color: @phase-default;
    border: none;
    padding: 1px 12px;
    font-size: 14px;
    &.contact-tag {
      color: @black;
    }
    &.attachment-tag {
      color: @primary-color;
      cursor: pointer;
      user-select: none;
      .e-icon {
        color: @text-gray !important;
      }
    }
  }
}
</style>
